<template>
<view>
<view class="body">
  <image src="http://imgbdb3.bendibao.com/xcx/20207/24/2020724123946_21206.jpg" class="main-img"></image>
  <!-- <view class="city-box">
    <text>{{city}}</text>
  </view> -->
  <view class="change-city">
    <text style="margin-left: 70rpx;">切换城市:</text>
    <picker @change="bindProv" :value="pindex" :range="provPick">
      <view class="sel-city">
        <view class="picker">
          <text>{{provPick[pindex]}}</text>
        </view>
        <image src="/static/images/dwicon.png"></image>
      </view>
    </picker>
    <picker @change="bindCity" :value="cindex" :range="cityPick">
      <view class="sel-city">
        <view class="picker">
          <text>{{cityPick[cindex]}}</text>
        </view>
        <image src="/static/images/dwicon.png"></image>
      </view>
    </picker>
  </view>

  <view class="content">
    <view class="top-title">
      <view style="font-weight: bolder;">{{city}}限行</view>
      <picker @change="bindSelect" :value="carIndex" :range="carType" class="pickerstyle" :disabled="carType.lenght>1?false:true">
        <view class="sel-car">
          <text>{{carType[carIndex]}}</text>
          <image src="/static/images/dwicon.png" v-if="carType.lenght>1"></image>
        </view>
      </picker>
    </view>

    <view class="loacl-box">
      <view v-for="(item, index) in loaclArr" :key="index" class="loacl" @tap="loaclClick" :data-name="item.name">
        <view :class="item.select?'text1':'text2'">{{item.name}}</view>
        <image src="/static/images/sys/bluehline.jpg" v-if="item.select"></image>
      </view>
    </view>
  </view>
  <view class="neirong">

    <view v-if="limitInfor[0].type==1 || limitInfor[0].type==2">
      <view class="limit-list" v-if="limitInfor[0].the_day">
        <view class="list">
          <text class="day">{{limitInfor[0].the_day[0].title}}</text>
          <text class="date">{{limitInfor[0].the_day[0].date}}({{limitInfor[0].the_day[0].week}})</text>
          <text class="rule">{{limitInfor[0].the_day[0].xxweihao}}</text>
        </view>
        <view class="line"></view>
        <view class="list">
          <text class="day">{{limitInfor[0].the_day[1].title}}</text>
          <text class="date">{{limitInfor[0].the_day[1].date}}({{limitInfor[0].the_day[1].week}})</text>
          <text class="rule">{{limitInfor[0].the_day[1].xxweihao}}</text>
        </view>
      </view>

      <swiper>
        <block v-for="(limit, index) in limitInfor[0].the_week" :key="index">
          <swiper-item>
            <view class="week-items">
              <view>{{limit.tips}}</view>
              <view class="week">
                <view v-for="(item, index2) in limit.weekday" :key="index2" class="week-list">
                  <view style="color:#929292;margin-bottom:10rpx;">{{item.day}}</view>
                  <view>{{item.weihao}}</view>
                </view>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>

      <!-- <view wx:if="{{limitInfor[0].the_week}}">
        <swiper class="swiper-box" style="height: 360rpx;">
          <block wx:for="{{limitInfor[0].the_week}}" wx:for-item="limit" wx:key="index">
            <swiper-item>
              <view class="items">
                <view>{{limit.tips}}</view>
                <view class="week">
                  <view class="week-list" wx:for="{{limit.weekday}}" wx:key="index">
                    <view style="color:#929292;margin-bottom:10rpx;">{{item.day}}</view>
                    <view>{{item.weihao}}</view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view> -->

      <view class="info" v-if="limitInfor[0].limitText">
        <view class="rule-title">
          <image src="/static/images/sys/xf_icon2.png"></image>
          <text>限行一</text>
        </view>
        <view class="rule-content">
          <text style="color:#000;margin:15rpx 0;font-weight:bold;">限行时间</text>
          <text>{{limitInfor[0].limitText.time}}</text>
          <text style="color:#000;margin:15rpx 0;font-weight:bold;">限行区域</text>
          <text>{{limitInfor[0].limitText.area}}</text>
          <text style="color:#000;margin:15rpx 0;font-weight:bold;">限行规则</text>
          <text>{{limitInfor[0].limitText.rule}}</text>
        </view>
      </view>
    </view>

    <view class="warntext" v-if="limitInfor[0].type==0">
      {{limitInfor[0].tab}}不限行</view>

    <view v-if="limitInfor[0].type==3">
      <view class="info" v-if="limitInfor[0].limitText">
        <view class="rule-title">
          <image src="/static/images/sys/xf_icon2.png"></image>
          <text>限行一</text>
        </view>
        <view class="rule-content">
          <text style="color:#000;margin:15rpx 0;font-weight:bold;">限行时间</text>
          <text>{{limitInfor[0].limitText.time}}</text>
          <text style="color:#000;margin:15rpx 0;font-weight:bold;">限行区域</text>
          <text>{{limitInfor[0].limitText.area}}</text>
          <text style="color:#000;margin:15rpx 0;font-weight:bold;">限行规则</text>
          <text>{{limitInfor[0].limitText.rule}}</text>
        </view>
      </view>
    </view>

    <view class="icon-box">
      <view class="icons" @tap="navDetail" :data-citycode="limitData.citycode" :data-id="limitData.calendar_arr.id" :data-type="limitData.calendar_arr.type" :data-url="limitData.calendar_arr.url">
        <image src="/static/images/sys/xxrule.png"></image>
        <text>本月限行</text>
      </view>
      <view class="icons" @tap="navDetail" :data-citycode="limitData.citycode" :data-id="limitData.punish_arr.id" :data-type="limitData.punish_arr.type" :data-url="limitData.punish_arr.url">
        <image src="/static/images/sys/chengfa.png"></image>
        <text>处罚标准</text>
      </view>
      <view class="icons" @tap="navDetail" :data-citycode="limitData.citycode" :data-id="limitData.question_arr.id" :data-type="limitData.question_arr.type" :data-url="limitData.question_arr.url">
        <image src="/static/images/sys/question.png"></image>
        <text>常见问题</text>
      </view>
    </view>
  </view>
</view>
<!-- 快捷导航 -->
<!-- <fastnav qrcodeimg="{{qrcodeimg}}" showNav="{{showNav}}"></fastnav> -->
<subscribeMessage :city="city" name="限行" tip="待限行有新消息时会给你提醒" :text="subscribeText" @subsuccess="subsuccess"></subscribeMessage>
</view>
</template>

<script>
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fastnav from "../../../component/fastnav/fastnav";
import subscribeMessage from "../../../component/subscribeMessage/subscribeMessage";

export default {
  data() {
    return {
      showNav: true,
      // 快捷导航是否展开
      testarr: [1, 2, 3, 4, 5],
      citycode: "bj",
      city: '北京',
      province: '北京',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      // carType: ["燃油车", "新能源车", "混动车"],
      carType: [],
      carIndex: 0,
      category: "燃油车",
      localname: "本地",
      loaclArr: [{
        name: "本地",
        select: true
      }, {
        name: "外地",
        select: false
      }],
      subscribeText: '限行新消息提醒',
      provPick: [],
      qrcodeimg: "",
      cityArray: "",
      citylist: "",
      infoData: "",
      limitData: "",
      limitInfor: ""
    };
  },

  components: {
    fastnav,
    subscribeMessage
  },
  props: {},
  onLoad: function (options) {
    util.reportMessage("fangwenliang", {
      action: "限行查询"
    }); // 监听页面加载的生命周期函数

    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(options.city, this.category);
    });
  },
  onShareAppMessage: function () {
    // 用户点击右上角转发
    return {
      title: this.infoData ? this.infoData.title : "限行查询"
    };
  },
  methods: {
    // 订阅成功
    subsuccess() {
      this.setData({
        subscribeText: "已订阅"
      });
    },

    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city; // let city="芜湖市";

          let citydata = this.citylist.filter(v => {
            if (city.indexOf(v.cityname) != -1) {
              return v;
            }
          });

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '限行查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
                    citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
                    province: Array.isArray(citydata) ? citydata[0].province : this.province,
                    cityPick: ["选择城市"]
                  });
                  util.checkSubscribe("限行", this.city).then(result => this.setData({
                    subscribeText: result ? '已订阅' : '限行新消息提醒'
                  }));
                  let clist = [];
                  this.provPick.forEach((v, k) => {
                    if (v == this.province) {
                      this.setData({
                        pindex: k
                      });
                    }
                  });
                  this.cityArray[this.pindex].citylist.forEach(v => {
                    clist.push(v.cityname);
                  });
                  this.setData({
                    cityPick: this.cityPick.concat(clist)
                  });
                  this.cityPick.forEach((v, k) => {
                    if (v == this.city) {
                      this.setData({
                        cindex: k
                      });
                    }
                  }); // 获取城市公众号二维码

                  this.getQrcode(this.citycode);
                  this.getCategory(this.citycode);
                  this.getInfoData(this.citycode, this.category);
                }
              }
            });
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    // 获取有隔离政策的城市
    getProvinceData(optcode) {
      let data = {
        action: "xianxingchaxun",
        type: "city"
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.city) {
          this.setData({
            cityArray: res.data.data.city
          });
          let provPick = [];
          let citylist = [];
          let clist = [];
          this.cityArray.forEach(v => {
            v.citylist.forEach(v => {
              citylist.push(v);
            });
            provPick.push(v.province);
            this.setData({
              provPick,
              citylist
            });
          });

          if (this.citylist) {
            this.citylist.forEach((v, k) => {
              if (optcode == v.citycode) {
                this.setData({
                  citycode: v.citycode,
                  city: v.cityname,
                  province: v.province
                });
              } else {
                this.setData({
                  citycode: this.citycode,
                  city: this.city,
                  province: this.province
                });
              }
            });
          }

          this.provPick.forEach((v, k) => {
            if (v == this.province) {
              this.setData({
                pindex: k
              });
            }
          });
          this.cityArray[this.pindex].citylist.forEach(v => {
            clist.push(v.cityname);
          });
          this.setData({
            cityPick: this.cityPick.concat(clist)
          });
          this.cityPick.forEach((v, k) => {
            if (v == this.city) {
              this.setData({
                cindex: k
              });
            }
          }); // 获取城市公众号二维码

          this.getQrcode(this.citycode);
          this.getCategory(this.citycode);
          this.getInfoData(this.citycode, this.category);
          util.checkSubscribe("限行", this.city).then(result => this.setData({
            subscribeText: result ? '已订阅' : '限行新消息提醒'
          }));

          if (this.citylist != "" && Array.isArray(this.citylist)) {
            // 获取定位
            this.getLocation();
          }
        }
      });
    },

    getCategory(citycode) {
      let data = {
        action: "category",
        citycode: citycode
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          carType: res.data.data
        });
      });
    },

    // 获取信息
    getInfoData(citycode, category) {
      let data = {
        action: "xianxingchaxun",
        citycode: citycode ? citycode : this.citycode,
        category: category
      };
      util.request('zhuanti.php', data).then(res => {
        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : '限行查询'
        });

        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"');
        }

        this.setData({
          infoData: res.data.data,
          limitData: res.data.data.xianxing != '' ? res.data.data.xianxing.item[0] : ''
        });
        let limitInfor = [];
        if (this.limitData.display) limitInfor = this.limitData.display.limitinfo.filter(v => {
          if (v.tab == "本地") {
            return v;
          }
        });
        this.setData({
          limitInfor
        });
      });
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"]
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];
      if (this.citylist) this.citylist.forEach(v => {
        if (v.cityname == cityname) {
          let citycode = v.citycode;
          this.setData({
            citycode,
            city: cityname
          });
          util.checkSubscribe("限行", this.city).then(result => this.setData({
            subscribeText: result ? '已订阅' : '限行新消息提醒'
          }));
        }
      }); // 获取城市公众号二维码

      this.getQrcode(this.citycode);
      this.getCategory(this.citycode);
      this.getInfoData(this.citycode, this.category);
      this.loaclArr.forEach(v => {
        if (v.name == "本地") {
          v.select = true;
        } else {
          v.select = false;
        }
      });
      this.setData({
        loaclArr: this.loaclArr
      });
    },

    // 汽车类型
    bindSelect(e) {
      let carIndex = e.detail.value;
      this.setData({
        carIndex,
        category: this.carType[carIndex]
      });
      this.getInfoData(this.citycode, this.category);
    },

    loaclClick(e) {
      let name = e.currentTarget.dataset.name;
      this.loaclArr.forEach(v => {
        if (v.name == name) {
          v.select = true;
        } else {
          v.select = false;
        }
      });
      this.setData({
        loaclArr: this.loaclArr,
        localname: name
      });
      let limitInfor = [];
      if (this.limitData && this.limitData.display) limitInfor = this.limitData.display.limitinfo.filter(v => {
        if (v.tab == name) return v;
      });
      this.setData({
        limitInfor
      });
    },

    navDetail(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type;
      let url = e.currentTarget.dataset.url;
      let citycode = e.currentTarget.dataset.citycode;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
        });
      } else {
        if (url != "") {
          if (url.indexOf("pages") == -1) {
            uni.navigateTo({
              url: '/pages/webview/webview?path=' + encodeURIComponent(url)
            });
          } else {
            uni.navigateTo({
              url: "/" + url
            });
          }
        } else {
          uni.showToast({
            title: "暂无数据，敬请期待！",
            icon: "none"
          });
        }
      }
    }

  }
};
</script>
<style>
.body{
    padding-bottom: 110rpx;
}
.main-img {
    width: 100%;
    height: 276rpx;
}
.city-box {
    background: #ffffff;
    border-radius: 35rpx;
    padding: 10rpx 30rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
}
.city-box text {
    font-size: 30rpx;
    font-weight: bolder;
}
.city-box image {
    width: 23rpx;
    height: 15rpx;
    margin-left: 10rpx;
}
.change-city {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    width: 90%;
    margin-left: 36rpx;
    display: flex;
    align-items: center;
}
.change-city text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    width: 102rpx;
    text-align: center;
    white-space: nowrap;
}
.sel-city {
    display: flex;
    align-items: center;
    margin-left: 80rpx;
}
.sel-city image {
    width: 19rpx;
    height: 10rpx;
    margin-left: 15rpx;
}

.content {
    margin: 80rpx 35rpx 30rpx 35rpx;
}
.top-title {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}
.pickerstyle {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 40rpx;
    padding: 20rpx 50rpx;
}
.pickerstyle text {
    font-size: 30rpx;
}
.sel-car {
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    flex-direction: row;
}
.sel-car image {
    width: 15rpx;
    height: 10rpx;
    margin-left: 20rpx;
}

.loacl-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    margin: 50rpx 0;
}
.loacl {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50rpx;
}
.text1 {
    font-size: 32rpx;
    color: #141414;
    font-weight: bold;
    margin-bottom: 10rpx;
}
.text2 {
    font-size: 32rpx;
    color: #929292;
    font-weight: bold;
    margin-bottom: 10rpx;
}
.loacl image {
    width: 30rpx;
    height: 5rpx;
}
.loacl:last-child {
    margin-right: 0;
}
/* box-shadow: 0rem 0rem 0.12rem 0rem rgba(0, 0, 0, 0.16); */
.neirong {
    border-radius: 60rpx 60rpx 0 0;
    background: rgba(255, 255, 255, 1);
    height: 100%;
    /* padding-top: 60rpx; */
    border-top: 2rpx solid rgba(0, 0, 0, 0.16);
}
.limit-list {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    border-bottom: 1rpx solid rgba(112, 112, 112, 0.14);
    margin: 60rpx 30rpx 0 30rpx;
    padding-bottom: 30rpx;
}
.list {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.list text {
    font-size: 26rpx;
    line-height: 40rpx;
}
.date {
    color: #929292;
}
.line {
    height: 85rpx;
    width: 1rpx;
    background-color: rgba(112, 112, 112, 0.14);
    margin: 0 60rpx;
}

.warntext{text-align: center;margin: 30rpx 0;font-size: 40rpx;}

.swiper-box {
    height: 180rpx;
    display: inline-block;
   border-bottom: 1rpx solid rgba(112, 112, 112, 0.14);
}
swiper{height: 190rpx;border-bottom: 1rpx solid rgba(112, 112, 112, 0.14);}
.swan-swiper-item {
    display: block;
}
.week-items {
    padding: 30rpx;
    font-size: 26rpx;
}
.swiper-box view {
    font-size: 26rpx;
}
.week {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
}
.week-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info {
    margin: 30rpx;

    /* padding: 30rpx 0; */
    padding-bottom: 30rpx;
}

.rule-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 30rpx;
}
.rule-title image {
    width: 18rpx;
    height: 26rpx;
}
.rule-title text {
    font-size: 32rpx;
    margin-left: 20rpx;
}
.rule-content {
    display: flex;
    flex-direction: column;
}
.rule-content text {
    font-size: 30rpx;
    color: #929292;
    line-height: 56rpx;
}

.icon-box {
    border-top: 15rpx solid #f5f5f5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 0;
}
.icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 70rpx;
}

.icons text {
    font-size: 26rpx;
    margin-top: 15rpx;
}
.icons image {
    width: 90rpx;
    height: 90rpx;
}

</style>